<!--
 * @Author: lijilong
 * @Date: 2024-06-15 19:57:34
 * @LastEditors: lijilong lijilong@thwater.com
 * @LastEditTime: 2024-06-20 14:56:51
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <view class="select-wrap" v-if="showDiag">
        <wd-popup v-model="showDiag" :z-index="999" position="bottom" @close="closeHandle" custom-class="picker-wrap">
            <view class="header">
                <view class="cancel text-gray" @click="closeHandle">取消</view>
                <view v-if="placeholder">{{ placeholder }}</view>
                <view class="ok text-blue" @click="done">确定</view>
            </view>
            <wd-picker-view :columns="options" v-model="currentValue" :label-key="kv.label" :value-key="kv.value"
                @change="pickerChange" />
        </wd-popup>
    </view>
</template>
<script lang="ts" setup>

const props = defineProps({
    placeholder: {
        type: String,
        default: '请选择',
    },
    show: {
        type: Boolean,
        default: false
    },
    options: {
        type: Array,
        default: () => {
            return [];
        },
    },
    kv: {
        type: Object,
        default: () => {
            return {
                label: 'label',
                value: 'value',
            };
        },
    },
    value: {
        type: [String, Number],
    },
});

const showDiag = ref(false)
const columns = ref([])
watch(
    () => props.show,
    (val) => {
        showDiag.value = val;
    },
    { immediate: true, deep: true },
);

watch(
    () => props.value,
    (val) => {
        if (!val) return
        currentValue.value = val;
    },
    { immediate: true, deep: true },
);

watch(
    () => props.options,
    (val) => {
        columns.value = val;
    },
    { immediate: true, deep: true },
);

const emit = defineEmits(['update:value', 'change', 'hideModal']);

const currentPicker = ref([]);
const currentValue = ref('');
const tempPicker = ref([]);
const currentLabel = ref('');

const closeHandle = () => {
    emit('hideModal', false)
};
const doneForm = ref({})
const pickerChange = ({ picker, value }) => {
    doneForm.value = picker.getSelects()
};
const done = () => {
    emit('change', doneForm.value);
    closeHandle();
};

</script>

<style lang="scss" scoped>
.select-wrap {
    flex: 1;
    height: 100vh;
    overflow: hidden;

    .placeholder {
        color: #bfbfbf;
        font-size: 30rpx;
    }

    .input {
        display: flex;
        padding-left: 20rpx;
        align-items: center;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 8rpx;

        .label {
            height: 100%;
            flex: 1;
            white-space: no-wrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &.border {
            border: 1px solid #dcdfe6;
        }
    }

    .arrow {
        font-size: 28rpx;
        color: #dcdfe6;
        font-size: 30rpx;
        width: 60rpx;
        text-align: center;
    }

}

.picker-wrap {
    border-top-right-radius: 5rpx;
    border-top-left-radius: 5rpx;

    .header {
        display: flex;
        justify-content: space-between;
        height: 100rpx;
        background: #fff;
        line-height: 100rpx;
        padding: 0 30rpx;
        font-size: 30rpx;
        border-bottom: 1rpx solid #f1f1f1;
    }

    .picker-view {
        width: 100vw;
        height: 600rpx;
        background-color: #fff;
        font-size: 38rpx;
    }

    .item {
        width: 100%;
        height: 50px;
        line-height: 50px;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        text {
            font-size: 26rpx;
            margin-left: 5rpx;
            color: #333;
        }
    }
}
</style>
